@color: skyblue;

* {
	box-sizing: border-box;
	font-family: '微軟正黑體';
}

body {
	background: url('../images/bg.jpg') no-repeat center top;
}

.bgc {
	background: url('../images/head_bg.png') no-repeat;
	background-size: 100% 100%;
}

.div__border {
	background: linear-gradient(0deg, @color, transparent 5% 95%, @color) no-repeat, linear-gradient(0deg, @color, transparent 5% 95%, @color) no-repeat, linear-gradient(90deg, @color, transparent 5% 95%, @color) no-repeat, linear-gradient(90deg, @color, transparent 5% 95%, @color) no-repeat,
		url('../images/line(1).png'), rgba(255, 255, 255, 0.03);
	background-size: 0.1vw 100%, 0.1vw 100%, 100% 0.1vw, 100% 0.1vw;
	background-position: 0 0, 100% 0, 0 0, 0 100%;
}

.map {
	background: url('../images/line(1).png'), rgba(255, 255, 255, 0.03);
}

.map__border--left {
	background: linear-gradient(0deg, transparent 0 90%, @color 90% 100%) no-repeat, linear-gradient(90deg, @color 0 5%, transparent 5% 100%) no-repeat, linear-gradient(0deg, transparent 0 20%, white 10% 80%, transparent 80% 100%) no-repeat;
	background-size: 0.1vw 100%, 100% 0.1vw, 0.05vw 100%;
	background-position: 0 0, 0 0, 100% 0;
}
.map__border--right {
	background: linear-gradient(0deg, @color 0 10%, transparent 10% 100%) no-repeat, linear-gradient(90deg, transparent 0 95%, @color 95% 100%) no-repeat;
	background-size: 0.1vw 100%, 100% 0.1vw;
	background-position: 100% 0, 0 100%;
}

.map__bg--1 {
	background: url('../images/map.png') no-repeat center;
	background-size: 70% 85%;
	opacity: 0.4;
}
